<template>
	<view class="ListValue">
	
		<view class="ListValue-content" :class="{'hidden':hideList}">
			<slot name="default" v-bind:data="renderList"></slot>
		</view>
		<image
			class="load-image" 
			v-for="(item,index) in waitRenderList" 
			:key="index" 
			:src="item" 
			:data-index="index"
			@load="handleImageLoad" 
			@error="handleImageLoad"
		></image>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				renderList: [],
				waitRenderList: [],
				list: [],
				stateNum: 0
			}
		},
		methods:{
			render(list = [], page = 1){
				
				this.list = list
				this.stateNum = 0
				this.waitRenderList = []
				
				let imgs = []
				list.forEach(i=>{
					if(i.upload) {
						imgs = [...imgs,...i.upload]
					}
				})
			
				this.waitRenderList = imgs
				
			},
			handleImageLoad(e) {
			
				this.stateNum ++
				if(this.waitRenderList.length === this.stateNum) {
				
					this.renderList = this.renderList.concat(this.list)
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ListValue {
		width: 100%;
		.ListValue-content {
			width: 100%;
		}
	}
	.load-image{
		display: none !important;
	}
</style>